<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/font-family.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/find-traveller.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/comment.js"></script>
    <title>Travel Sharer</title>
</head>
<body>
    <body>
    <!-- 导航 start -->
    <div class="nav-top">
        <div class="nav-login">
            <!-- 登录前 start -->
            <div class="nav-head" style="display: none;">
                <a href="login.html">
                    <img class="login-img" src="img/head.png" alt="">
                    <span>Log In/ Sign Up</span>
                </a>
            </div>
            <!-- 登录前 end -->
            
            <!-- 登录后 start -->
            <div class="nav-head login-for">
                <a class="click-more-nav">
                    <img class="login-img" src="img/head.png" alt="">
                    <span>Hello 呆呆呆</span>
                    <img class="login-more" src="img/xiala.png" alt="">
                </a>
                <ul class="more-nav">
                    <a href="myAccount.html">
                        <li>My Account</li>
                    </a>
                    <li class="line-li">
                        <div class="line"></div>
                    </li>
                    <a href="">
                        <li>Log Out</li>
                    </a>
                </ul>
            </div>
            <!-- 登录后 end -->
            <div class="nav-link">
                <a href="https://www.facebook.com/">
                    <img src="img/fb.png" alt="">
                </a>
                <a href="https://www.instagram.com/">
                    <img src="img/ins.png" alt="">
                </a>
            </div>
        </div>
        <nav class="nav-list">
            <ul class="nav-detail">
                <li><a href="index.html" >Hmoe</a></li>
                <li><a href="travelNote.html">Travel Note</a></li>
                <li><a href="findTraveller.html">Find Traveller</a></li>
                <li><a href="discover.html">Discover</a></li>
                <li><a href="myPost.html">My Post</a></li>
                <li><a href="#" class="nav-action">Members</a></li>
                <li><a href="myCollection.html">My Collection</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
            <div class="nav-search">
                <img src="img/search.png" alt="">
                <input type="text" placeholder="Search Site">
            </div>
        </nav>
    </div>
    <!-- 导航 end -->
    <!-- 中部 start -->
    <div class="center-box">
        <!-- 未登录样式 start -->
        <div class="member-box" style="display: none">
            <p>Log In to Connect With Members</p>
            <p>View and follow other members, leave comments & more.</p>
            <div class="member-btn">
                <a href="login.html"><span> Log In</span></a>
            </div>
        </div>
        <!-- 未登录样式 end -->
        <!-- 登录后样式 start -->
        <div class="member-login-for">
            <div class="member-box-nav">
                <div class="selece-member">
                    <div class="change-member" id="c-member">
                        <span class="choose-text" id="m-text">All members</span>
                        <div class="status-icon" id="icon-one"><!--图标--></div>
                    </div>
                    
                     <ul class="member-list" id="m-list" style="display: none;">
                        <li>All members</li>
                        <li>Admins</li>
                        <li>Writers</li>
                        <li>Moderators</li>
                     </ul>
                </div>
                <div class="sort-by">
                    <i>Sort by:</i> 
                    <div class="change-sort" id="c-sort">
                        <span class="choose-text" id="s-text">Default</span>
                        <div class="status-icon" id="icon-two"><!--图标--></div>
                    </div>
                    <ul class="member-list sort-bt-list" id="s-list" style="display: none;">
                        <li>Default</li>
                        <li>No. of followers</li>
                        <li>Newest to oldest</li>
                        <li>Oldest to newest</li>
                        <li>No. of blog posts</li>
                        <li>No. of forum posts</li>
                    </ul>
                </div>
                <div class="search-member">
                    <div class="block-list"><!-- 列表选择图 --></div>
                    <div class="list-list"><!-- 列表选择图 --></div>
                    <div class="search-css">
                        <img src="img/memberSearch.png" alt="">
                        <input type="text" placeholder="Find a member...">
                        <span>3</span>
                    </div>
                </div>
            </div>
            <div class="member-area">
                <!-- 图片样式 start -->
                <div class="member-flat-css" >
                    <div class="flat-block">
                        <img src="img/detail3.png" class="flat-block-img" alt="">
                        <p class="flat-block-name">
                            <a href="#">用户名</a>
                        </p>
                        <div class="fllower-block">
                            <div class="f-block-left">
                                <a href="#">
                                    <p class="f-block-p">0</p>
                                    <p class="f-block-p">Fllowers</p>
                                </a>
                            </div>
                            <div class="f-block-line"></div>
                            <div class="f-block-right">
                                <a href="">
                                    <p class="f-block-p">0</p>
                                    <p class="f-block-p">Fllowing</p>
                                </a>
                            </div>
                        </div>
                        <a href="#">
                            <div class="fllower-btn">
                                Fllow
                            </div>
                        </a>
                    
                        <div class="edit-per">
                            <img src="img/noteMore.png" alt="" class="note-more-list">
                            <a id="edit-info-click" class="show-report-modal">
                                <div class="edit-box">Edit Profile</div>
                            </a>
                        </div>
                    </div>
                    <div class="flat-block">
                        <img src="img/detail3.png" class="flat-block-img" alt="">
                        <p class="flat-block-name">
                            <a href="#">用户名</a>
                        </p>
                        <div class="fllower-block">
                            <div class="f-block-left">
                                <a href="#">
                                    <p class="f-block-p">0</p>
                                    <p class="f-block-p">Fllowers</p>
                                </a>
                            </div>
                            <div class="f-block-line"></div>
                            <div class="f-block-right">
                                <a href="">
                                    <p class="f-block-p">0</p>
                                    <p class="f-block-p">Fllowing</p>
                                </a>
                            </div>
                        </div>
                        <a href="#">
                            <div class="fllower-btn">
                                Fllow
                            </div>
                        </a>
                    
                        <div class="edit-per">
                            <img src="img/noteMore.png" alt="" class="note-more-list">
                            <a id="edit-info-click" class="show-report-modal">
                                <div class="edit-box">Edit Profile</div>
                            </a>
                        </div>
                    </div>
                    <div class="flat-block">
                        <img src="img/detail3.png" class="flat-block-img" alt="">
                        <p class="flat-block-name">
                            <a href="#">用户名</a>
                        </p>
                        <div class="fllower-block">
                            <div class="f-block-left">
                                <a href="#">
                                    <p class="f-block-p">0</p>
                                    <p class="f-block-p">Fllowers</p>
                                </a>
                            </div>
                            <div class="f-block-line"></div>
                            <div class="f-block-right">
                                <a href="">
                                    <p class="f-block-p">0</p>
                                    <p class="f-block-p">Fllowing</p>
                                </a>
                            </div>
                        </div>
                        <a href="#">
                            <div class="fllower-btn">
                                Fllow
                            </div>
                        </a>
                    
                        <div class="edit-per">
                            <img src="img/noteMore.png" alt="" class="note-more-list">
                            <a id="edit-info-click" class="show-report-modal">
                                <div class="edit-box">Edit Profile</div>
                            </a>
                        </div>
                    </div>
                    <div class="flat-block">
                        <img src="img/detail3.png" class="flat-block-img" alt="">
                        <p class="flat-block-name">
                            <a href="#">用户名</a>
                        </p>
                        <div class="fllower-block">
                            <div class="f-block-left">
                                <a href="#">
                                    <p class="f-block-p">0</p>
                                    <p class="f-block-p">Fllowers</p>
                                </a>
                            </div>
                            <div class="f-block-line"></div>
                            <div class="f-block-right">
                                <a href="">
                                    <p class="f-block-p">0</p>
                                    <p class="f-block-p">Fllowing</p>
                                </a>
                            </div>
                        </div>
                        <a href="#">
                            <div class="fllower-btn">
                                Fllow
                            </div>
                        </a>
                    
                        <div class="edit-per">
                            <img src="img/noteMore.png" alt="" class="note-more-list">
                            <a id="edit-info-click" class="show-report-modal">
                                <div class="edit-box">Edit Profile</div>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 图片样式 end -->
                <!-- 列表样式 start -->
                <div class="member-list-css" style="display: none;">
                    <div class="list-block">
                        <div class="list-block-user">
                            <img src="img/detail2.png" alt="">
                            <span>xxx</span>
                        </div>
                        <div class="list-block-fllower">
                            <span> 0 Fllowers</span>
                            <span> 0 Fllowing</span>
                            <span class="list-b-f-btn">Fllow</span>
                        </div>
                        <div class="edit-per list-edit-per">
                            <img src="img/noteMore.png" alt="" class="note-more-block">
                            <a class="show-report-modal">
                                <div class="edit-box">Edit Profile</div>
                            </a>
                        </div>
                    </div>
                    <div class="list-block">
                        <div class="list-block-user">
                            <img src="img/detail2.png" alt="">
                            <span>xxx</span>
                        </div>
                        <div class="list-block-fllower">
                            <span> 0 Fllowers</span>
                            <span> 0 Fllowing</span>
                            <span class="list-b-f-btn">Fllow</span>
                        </div>
                        <div class="edit-per list-edit-per">
                            <img src="img/noteMore.png" alt="" class="note-more-block">
                            <a class="show-report-modal">
                                <div class="edit-box">Edit Profile</div>
                            </a>
                        </div>
                    </div>
                    <div class="list-block">
                        <div class="list-block-user">
                            <img src="img/detail2.png" alt="">
                            <span>xxx</span>
                        </div>
                        <div class="list-block-fllower">
                            <span> 0 Fllowers</span>
                            <span> 0 Fllowing</span>
                            <span class="list-b-f-btn">Fllow</span>
                        </div>
                        <div class="edit-per list-edit-per">
                            <img src="img/noteMore.png" alt="" class="note-more-block">
                            <a class="show-report-modal">
                                <div class="edit-box">Edit Profile</div>
                            </a>
                        </div>
                    </div>
                   
                </div>
                <!-- 列表样式 end -->

            </div>
        </div>
        <!-- 登录后样式 end -->
        <!-- 弹窗 start -->
        <div class="model-background" id="modal-background" style="display: none;"></div>
        <div class="model-body" id="modal" style="display: none;">
            <div class="model-title">
                <span class="model-close close-model">
                    ×
                </span>
            </div>
            <div class="model-content">
                <h3>Report Member</h3>
                <p>Help us understand why you’re reporting this member.</p>
                <div class="report-radio">
                    <div class="radio-css">
                        <input type="radio" name="member">
                        <span>Offensive Content</span>
                    </div>
                    <div class="radio-css">
                        <input type="radio" name="member">
                        <span>Offensive Media</span>
                    </div>
                    <div class="radio-css">
                        <input type="radio" name="member">
                        <span>Spam</span>
                    </div>
                </div>
            </div>
            <div class="model-footer">
                <button class="cancle-report close-model">Cancel</button>
                <button class="confirm-report">Report</button>
            </div>
        </div>
        <!-- 弹窗 start -->
    </div>
    <!-- 中部 end -->
    <!-- 底部 start -->
    <footer class="bottom-box">
        <div class="bottom-bg">
            <img src="img/bottomBg.png" alt="">
        </div>
        <div class="bottom-content">
            <div class="content-left">
                <!-- <img src="img/bottomImg.png" alt=""> -->
            </div>
            <div class="content-right">
                <div class="about-us">ABOUT US</div>
                <div class="us-info">
                    <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                    
                    <span class="us-info-add">​XXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
                </div>
                <div class="us-more">
                    <a href="about.html" class="us-more-a">
                        <div>
                            READ MORE
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="bottom-copy">
            <div class="copy-css">© 2019 by Travel Sharer.</div>
        </div>
    </footer>
    <!-- 底部 end -->
    <script>
    // 登陆成功后点击头像下拉列表 start
    $('.click-more-nav').click(function () {
        $('.more-nav').show();
    })
    // 登陆成功后点击头像下拉列表 end
    function tab(list, text, icon) {
        $(list).toggle();
        let color = '#000';
        let backgroundImg = 'url("img/down.png")';
        if ($(list).css('display') !== 'none') {
            color = '#00c0c6';
            backgroundImg = 'url("img/up.png")';
        } 
        $(text).css("color", color);
        $(icon).css("background-image", backgroundImg);
    }
    function select(list, text, icon, that) {
        $(text).html(that.html());
        $(text).css("color", "#000");
        $(icon).css("background-image", 'url("img/down.png")');
        $(list).hide();
    }
    // 显示列表选择 start
    $('#c-member').click(function(){
        tab('#m-list', '#m-text', '#icon-one');
    })
    $('#m-list li').click(function(){
        select('#m-list', '#m-text', '#icon-one', $(this));
    })
    // 显示列表选择 start
    $('#c-sort').click(function(){
        tab('#s-list', '#s-text', '#icon-two');
    })
    $('#s-list li').click(function(){
        select('#s-list', '#s-text', '#icon-two', $(this));
    })
    // 显示列表选择 end

    // 选择图表样式或列表 start
    $(".block-list").click(function(){
        $('.member-flat-css').show();
        $(this).css("background-image", 'url("img/blockListAction.png")');
        $('.member-list-css').hide();
        $(".list-list").css("background-image", 'url("img/list.png")');
    })

    $(".list-list").click(function () {
        $('.member-flat-css').hide();
        $(this).css("background-image", 'url("img/listAction.png")');
        $('.member-list-css').show();
        $(".block-list").css("background-image", 'url("img/blockList.png")');
    })
    // 选择图表样式或列表 end
    $('.note-more-list').click(function () {
        const shareBtn = $(this).next();
        if (shareBtn.css('display') == 'none') {
            $('.show-report-modal').hide();
            shareBtn.show();
        } else {
            shareBtn.hide();
        }
        });
    $('.note-more-block').click(function () {
        const shareBtn = $(this).next();
        if (shareBtn.css('display') == 'none') {
            $('.show-report-modal').hide();
            shareBtn.show();
        } else {
            shareBtn.hide();
        }
    });
    $('.show-report-modal').click(function() {
        $('.show-report-modal').hide();
        $('#modal-background').show();
        $('#modal').show();
    });

    // 关闭弹窗 start
    $('.close-model').click(function(){
        $('#modal-background').hide();
        $('#modal').hide();
    })

    $('.confirm-report').click(function () {
        $('#modal-background').hide();
        $('#modal').hide();
    })
    
    // 关闭弹窗 end

    </script>
</body>
</html>